<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    // chartData: {
    //   type: Object,
    //   required: true
    // }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    // chartData: {
    //   deep: true,
    //   handler(val) {
    //     console.log('value: ' + JSON.stringify(val))
    //     this.setOptions(val)
    //   }
    // }
  },
  mounted() {
   this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.chart.setOption( {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          toolbox: {
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          legend: {
            data: ['产品入库', '产品出库', '原料入库']
          },
          xAxis: [
            {
              type: 'category',
              data: ['2023-09', '2023-10', '2023-11', '2023-12', '2024-01'],
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '产品入库吨数',
              min: 0,
              max: 250,
              interval: 50,
              axisLabel: {
                formatter: '{value} '
              }
            },
            {
              type: 'value',
              name: '产品出库吨数',
              min: 0,
              max: 25,
              interval: 5,
              axisLabel: {
                formatter: '{value} '
              }
            }
          ],
          series: [
            {
              name: '产品入库',
              type: 'bar',
              tooltip: {
                valueFormatter: function (value) {
                  return value + ' ';
                }
              },
              data: [
                2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
              ]
            },
            {
              name: '产品出库',
              type: 'bar',
              tooltip: {
                valueFormatter: function (value) {
                  return value + ' ';
                }
              },
              data: [
                2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
              ]
            },
            {
              name: '原料入库',
              type: 'line',
              yAxisIndex: 1,
              tooltip: {
                valueFormatter: function (value) {
                  return value + ' ';
                }
              },
              data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
            }
          ]
        })

    },
    setOptions({ expectedData, actualData,orderData,proofingData,finishOrderData,xAxisList } = {}) {

    }
  }
}
</script>
